<template>
  <!-- 根元素 -->
  <div class="myComponent">

    <!-- 大卡片 -->
    <el-card shadow="never">
      <el-form inline>
        
        <!-- 小卡片1 -->
        <el-form-item label="品牌名称">
          <el-input placeholder="请输入品牌名称" size="small"></el-input>
        </el-form-item>

        <!-- 小卡片2 -->
        <el-form-item label="状态">
          <el-select placeholder="请选择状态">
            <el-option label="开启" value="0"></el-option>
            <el-option label="关闭" value="1"></el-option>
          </el-select>
        </el-form-item>

        <!-- 时间线 -->
        <el-date-picker
          v-model="value2"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </el-date-picker>

        <!-- 按钮1 -->
        <el-button type="primary" icon="el-icon-search" class="button_1"
          >搜索</el-button
        >
        <!-- 按钮2 -->
        <el-button type="write" icon="el-icon-refresh">重置</el-button>
      </el-form>

      <!-- 左边 -->
      <div class="buttonFlex">
        <el-button type="primary" icon="el-icon-plus" class="button_3"
          >新增</el-button
        >

        <!-- 右边 -->
        <div>
          <el-tooltip content="显示搜索" placement="top">
            <el-button icon="el-icon-search" circle></el-button
          ></el-tooltip>
          <el-tooltip content="刷新" placement="top">
            <el-button icon="el-icon-refresh" circle></el-button
          ></el-tooltip>
        </div>
      </div>
    </el-card>

    <!-- 主题 -->
    <el-card shadow="never">
      <!-- 主题标题 -->
      <el-card shadow="always">
        <el-row :gutter="20" class="row">
          <el-col :span="3"
            ><div class="grid-content bg-purple">品牌编号</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">品牌名称</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">品牌图片</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">品牌排序</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">品牌描述</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">状态</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">创建时间</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">操作</div></el-col
          >
        </el-row>
      </el-card>

      <!-- 内容1 -->
      <el-card shadow="always">
        <el-row :gutter="20" class="row2">
          <el-col :span="3"><div class="grid-content bg-purple">1</div></el-col>
          <el-col :span="3"
            ><div class="grid-content bg-purple">华哥</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">
              <img
                src="../../../../../src/assets/images/hairstyle.jpeg"
                height="100px"
              /></div
          ></el-col>
          <el-col :span="3"><div class="grid-content bg-purple">7</div></el-col>
          <el-col :span="3"
            ><div class="grid-content bg-purple">我有三大法宝</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">开启</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">xxxx</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">修改&操作</div></el-col
          >
        </el-row>
      </el-card>

      <!-- 内容2 -->
      <el-card shadow="always">
        <el-row :gutter="20" class="row2">
          <el-col :span="3"><div class="grid-content bg-purple">2</div></el-col>
          <el-col :span="3"
            ><div class="grid-content bg-purple">华哥</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">
              <img
                src="../../../../../src/assets/images/hairstyle.jpeg"
                height="100px"
              /></div
          ></el-col>
          <el-col :span="3"><div class="grid-content bg-purple">7</div></el-col>
          <el-col :span="3"
            ><div class="grid-content bg-purple">我有三大法宝</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">开启</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">xxxx</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">修改&操作</div></el-col
          >
        </el-row>
      </el-card>

      <!-- 内容3 -->
      <el-card shadow="always">
        <el-row :gutter="20" class="row2">
          <el-col :span="3"><div class="grid-content bg-purple">3</div></el-col>
          <el-col :span="3"
            ><div class="grid-content bg-purple">华哥</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">
              <img
                src="../../../../../src/assets/images/hairstyle.jpeg"
                height="100px"
              /></div
          ></el-col>
          <el-col :span="3"><div class="grid-content bg-purple">7</div></el-col>
          <el-col :span="3"
            ><div class="grid-content bg-purple">我有三大法宝</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">开启</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">xxxx</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">修改&操作</div></el-col
          >
        </el-row>
      </el-card>

      <!-- 内容4 -->
      <el-card shadow="always">
        <el-row :gutter="20" class="row2">
          <el-col :span="3"><div class="grid-content bg-purple">4</div></el-col>
          <el-col :span="3"
            ><div class="grid-content bg-purple">华哥</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">
              <img
                src="../../../../../src/assets/images/hairstyle.jpeg"
                height="100px"
              /></div
          ></el-col>
          <el-col :span="3"><div class="grid-content bg-purple">7</div></el-col>
          <el-col :span="3"
            ><div class="grid-content bg-purple">我有三大法宝</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">开启</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">xxxx</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">修改&操作</div></el-col
          >
        </el-row>
      </el-card>

      <!-- 内容5 -->
      <el-card shadow="always">
        <el-row :gutter="20" class="row2">
          <el-col :span="3"><div class="grid-content bg-purple">5</div></el-col>
          <el-col :span="3"
            ><div class="grid-content bg-purple">华哥</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">
              <img
                src="../../../../../src/assets/images/hairstyle.jpeg"
                height="100px"
              /></div
          ></el-col>
          <el-col :span="3"><div class="grid-content bg-purple">7</div></el-col>
          <el-col :span="3"
            ><div class="grid-content bg-purple">我有三大法宝</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">开启</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">xxxx</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">修改&操作</div></el-col
          >
        </el-row>
      </el-card>

      <!-- 样式盒子 -->
      <div class="pagination">
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="7"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "myComponent",
};
</script>

<style>
/* 搜索按钮 */
.button_1 {
  margin-left: 10px;
}

/* 刷新按钮 */
.button_3 {
  color: #44cef6;
  background-color: #e8f5ff;
}
.buttonFlex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 主题标题 */
.row {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* 主题内容 */
.row2 {
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/*分页 */
.pagination {
  display: flex;
  justify-content: right;
  align-items: center;
  text-align: center;
  margin-top: 20px;
}
</style>
